<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="王晨阳">
        <title>模态框（js插件）</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            
        </style>
    </head>
    <body>
        <!--
            将 .modal 的id 与 button的data-target属性绑定在一起，可以实现
            点击按钮，弹出模态框。
        -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Launch demo modal
        </button>

        <!-- Modal -->
        <!--1 .mode ：模态框-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <!--1-1 .modal-dialog：布局上实现定宽居中-->
          <div class="modal-dialog" role="document">
            <!--1-2 .modal-content：白色区域-->
            <div class="modal-content">
                <!-- 1-2-1 .modal-header:头部区域-->
              <div class="modal-header">
                  <!-- x号，关闭按钮-->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <!-- 模态框标题-->
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>

              <!--1-2-2 模态框的内容区域-->
              <div class="modal-body">
                ...
              </div>

              <!--1-2-3 页脚区域-->
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
        
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>